<div class="msg-main-container">

  <div class="search-wrap">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
      <nz-form-item>
        <nz-form-label>日期</nz-form-label>
        <nz-form-control>
          <nz-date-picker formControlName="sendDate" [nzAllowClear]="true"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>关键词</nz-form-label>
        <nz-form-control>
          <input formControlName="content" nz-input placeholder="关键词"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-radio-group nzSize="small" formControlName="state" (ngModelChange)="queryInfo()">
          <label nz-radio-button [nzValue]="">全部消息</label>
          <label nz-radio-button [nzValue]="'1'">已读消息</label>
          <label nz-radio-button [nzValue]="'0'">未读消息</label>
        </nz-radio-group>
      </nz-form-item>
    </form>
  </div>

  <div class="main-wrap">
    <div class="left-panel">
      <div class="day-list">
        <div *ngFor="let msgType of msgTypeList"
             [ngClass]="{'active': msgType.value === selectedType}"
             (click)="selectMsgType(msgType.value)">{{msgType.label}}</div>
      </div>
    </div>

    <div class="right-panel">
      <nz-table
        #middleTable
        nzSize="middle"
        nzShowSizeChanger
        [nzFrontPagination]="false"
        [nzLoading]="loading"
        [nzData]="tableData"
        [nzTotal]="total"
        [(nzPageIndex)]="pageNum"
        [(nzPageSize)]="pageSize"
        (nzPageSizeChange)="queryInfo(true)"
        (nzPageIndexChange)="queryInfo()"
      >
        <thead>
        <tr>
          <th>状态</th>
          <th>标题内容</th>
          <th>发送单位</th>
          <th>接收单位</th>
          <th>发送时间</th>
          <th>类型</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of middleTable.data">
          <td><span [ngStyle]="{'color': data.state == '0' ? 'red' : '' }">{{ data.stateName }}</span></td>
          <td>{{ data.content }}</td>
          <td>{{ data.sendManageName }}</td>
          <td>{{ data.acceptManageName }}</td>
          <td>{{ data.sendTime }}</td>
          <td>{{ data.secondTypeName }}</td>
          <td>
            <ng-container *ngIf="selectedType==''">
              <a (click)="view(data)">查看详情</a>

              <ng-container *ngIf="data.firstType == '1'">
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="goPage(data, '/realtime-control/dispatch-zx')">转到调度页面</a>
              </ng-container>

              <ng-container *ngIf="data.state=='0' && data.needForward=='1'">
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="openXxzfModal(data)">消息转发</a>
              </ng-container>

            </ng-container>

            <ng-container *ngIf="selectedType=='1'">
              <a (click)="view(data)">查看详情</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="goPage(data, '/realtime-control/dispatch-zx')">转到调度页面</a>
              <ng-container *ngIf="data.state=='0' && data.needForward=='1'">
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="openXxzfModal(data)">消息转发</a>
              </ng-container>
            </ng-container>

            <ng-container *ngIf="selectedType=='2' || selectedType=='3' || selectedType=='4'">
              <a (click)="view(data)">查看详情</a>
            </ng-container>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>

  <nz-modal nzClassName="custom-modal"
            [nzBodyStyle]="nzBodyStyle"
            (nzOnCancel)="detailModalClose()"
            [nzTitle]="'消息详情'"
            nzWidth="800" [(nzVisible)]="detailModalShow"

  >
    <div class="modal-wrap">
      <form nz-form [formGroup]="detailForm">
        <div class="cell-wrap">
          <div class="cell">
            <strong>发送单位：</strong>{{detailForm.value.sendManageName}}
          </div>

          <div class="cell">
            <strong>接收单位：</strong>{{detailForm.value.acceptManageName}}
          </div>

          <div class="cell">
            <strong>发送时间：</strong>{{detailForm.value.sendTime}}
          </div>
        </div>

        <div style="width: 100%;margin-bottom: 5px;"><strong>消息详情：</strong></div>
        <div>
          <textarea formControlName="content" nz-input rows="5" style="width: 100%"></textarea>
        </div>
      </form>
    </div>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="detailModalClose()">关闭</button>
    </div>
  </nz-modal>

  <nz-modal nzClassName="custom-modal"
            [nzBodyStyle]="nzBodyStyle"
            nzWidth="800" [(nzVisible)]="xxzfModalShow" [nzTitle]="'消息转发'"
            (nzOnCancel)="xxzfModalShow=false"
  >
    <div class="modal-wrap">
      <form nz-form [formGroup]="xxzfForm">
        <div class="cell-wrap">
          <div class="cell">
            <strong>发送单位：</strong>{{xxzfForm.value.sendManageName}}
          </div>

          <div class="cell">
            <strong>将消息发送至：</strong>{{xxzfForm.value.acceptManageName}}
          </div>

        </div>

        <div style="width: 100%;margin-bottom: 5px;"><strong>消息详情：</strong></div>
        <div>
          <textarea formControlName="content" nz-input rows="5" style="width: 100%"></textarea>
        </div>
      </form>
    </div>
    <div *nzModalFooter>
      <button nz-button nzType="primary" (click)="xxzfConfirm()">确认转发</button>
      <button nz-button nzType="default" (click)="xxzfModalShow=false">关闭</button>
    </div>
  </nz-modal>

</div>
